<template>
 <div class="box">
   <el-row>
     <el-col :span="24">
       <div class="wang-editor-container" id="editor—wrapper">
         <Toolbar
           id="toolbar-container"
           :editor="editor"
           :defaultConfig="toolbarConfig"
           :mode="mode"
         />
         <Editor
           class="editor"
           id="editor-container"
           style="height: 500px; overflow-y: hidden;"
           v-model="html"
           :defaultConfig="editorConfig"
           :mode="mode"
           @onCreated="onCreated"
         />


       </div>
       <el-dialog
         title="提示"
         :visible.sync="dialogVisible"
         width="30%"
       >
         <span class="text" ref="dom"></span>
         <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
       </el-dialog>
       <el-button type="primary" style="margin-top: 20px" @click="save">保存</el-button>
     </el-col>
   </el-row>
 </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@/styles/wangeditor.css'

export default {
  name: 'tencent',
  components: { Editor, Toolbar },
  data() {
    return {
      dialogVisible: false,
      editor: null,
      html: `<h1>一级标题</h1>
             <h2>二级标题</h2>
              <h3>三级标题</h3>`,
      toolbarConfig: {},
      editorConfig: { placeholder: '内容...' },
      mode: 'default', // or 'simple',
      dom:''
    }
  },
  methods: {
    save() {
      const editor = this.editor

      const html = editor.getHtml()
      const text = editor.getText()
      this.dialogVisible = true
      this.$nextTick(()=>{
        let dom = this.$refs.dom
        dom.innerHTML = html
      })
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    }
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      // this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    }, 1500)
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }

}
</script>
<style scoped lang="scss">
.w-e-full-screen-container{
  z-index: 9999!important;
}
.box{
  padding-bottom: 50px;
}
.editor {
  width: 100%;
  height: 500px !important;
  padding: 0 40px 0 40px;
  //margin: 20px auto 20px auto;
  background-color: #fff;
  border: 0;
}
</style>
